<template>
	<view>
		<view id="contaniner" >
			<view class="zhanwei"></view>
			<scroll-view v-if="list.length!=1" class="scroll-view_H" :scroll-x="true"  :scroll-into-view ="`demo${tabIndex}`" >
				<view v-for="(each,i) in list" class="scroll_item" :key="i" :id="`demo${i}`" :class="tabIndex===i ?  'active':''" @click="clickTab(i)">{{each=='佣金'?'福利金':each=='提现佣金'?'提现福利金':each}}</view>

<view class="line" :style="{left:(tabMsg.left[tabIndex]+(((tabMsg.width[tabIndex]-25)/2)))+'px'}"></view>
                </scroll-view>
				
                   <swiper id="swiper_wrap" :style="{height:(wrap_height)+'px'}" :current = 'tabIndex' class="swiper" :duration0="0" @change="ontabChange">  
						<swiper-item  v-for="(item,i) in list " :key="i">
							 <scroll-view scroll-y="true" style="height: 100%;" @scrolltolower="lowerLoadMore" >  
                            <view  class="swiper-item" :style="{'color': infocolor[i]}">
								<!-- 卡片内容 -->
								<image v-if="i==index" v-for="(infovalue,index) in info" :key="index" :src="cnds+'/upload/ad/'+infovalue.img" mode=" aspectFit" class="images"></image>
								<view class="dangqian">当前{{list[i]=='佣金'?'福利金':list[i]=='提现佣金'?'福利金':list[i]=='提现金币'?'金币':list[i]}}</view>
								<view class="amount">
									<view class="amont_money">{{cardContentList.money}}</view>
									<view v-if="list[i]=='积分' || list[i]=='金币' || list[i]=='提现金币'" class="amont_money_right">{{list[i]=='积分'?cardContentList.money/100:cardContentList.money/10000}}元</view>
								</view>
								<!-- date 开始 -->
								<view class="date_wrap">
									<view class="date_wrap_top">
										<view class="date_item_top">{{currentDate.year}}年</view>
										<view class="date_item_top">月支出({{list[i]=='提现佣金'? '福利金': list[i]=='提现金币' ? '金币': list[i]=='佣金' ? '福利金':list[i]}})</view>
										<view class="date_item_top">月收入({{list[i]=='提现佣金'? '福利金': list[i]=='提现金币' ? '金币': list[i]=='佣金' ? '福利金':list[i]}})</view>
									</view>
									<view class="date_wrap_bottom">
										<view class="date_item_bottom" @click="openCalendar">{{currentDate.month}}月<span class="san">{{icons.xiasanjiao}}</span></view>
										<view class="date_item_bottom">{{cardContentList.spending}}</view>
										<view class="date_item_bottom">{{cardContentList.income}}</view>
									</view>
								<!-- date 完 -->
								<view class="bottom_bar"> 
									<view>今日{{listsubtitle[i]}}{{cardContentList.jin_money}}</view>
									<view class="bottom_bar_right">{{list[i]=='积分'?'100'+list[i]+'=1元':list[i]=='金币'?'10000'+list[i]+'=1元':''}}</view>
								</view>
								</view>
							</view> 
						<view class="total_wrap">
							<view class="content_allwrap" v-for="(every,i) in contentList" :key='i' >
							<view  :class="[{'content_date2':!every.wrap_active || every.dateArr.length==(i+1)},'content_date']"  v-if="every.dateArr.length!=0" @click="changeWrapActive(i)">
								<view class="content_date_left">{{every.date}}-{{every.xiqi}} 收入 {{every.shouru}} 支出 {{every.zhichu}}</view> 
								<view :class="{'conent_date_active':every.wrap_active,'conent_date_right':!every.wrap_active}">{{icons.dayuhao}}</view>
							</view>
							<!-- 下面是列表 -->   
							<view class="item_wrap" v-if="every.dateArr!=null" :style="{height:(every.dateArr.length*zhanwei_height)+'px'}" :class="{'item_wrap_active':every.wrap_active}"  >
								      <view class="item"  v-for="(each,index) in every.dateArr" :key = "index">
								      	<view class="item_date"><view>{{each.time}}</view></view>
								      	<view class="item_content">
								      		<view class="item_content_left">
								      			<view class="item_one_name" :style="{background: each.one_bgcolor}">{{each.one_name}}</view>
								      			<view class="item_remark uni-sl1">{{each.remark}}</view>
								      		</view>
								      		<view class="item_content_right">{{each.type==1?'-':'+'}}{{each.money}}</view>
								      	</view>
								      </view>
								            
							
								</view>
							</view>
						</view>
							<!-- 列表完 -->
							<uni-load-more :status="zhuangtai[state]" class="load_more"></uni-load-more>
							 </scroll-view>
                        </swiper-item>
						
                    </swiper>
				
					</view> 
					<!-- 日期选择 -->
					    <w-picker
					           :visible.sync="visible"
					           mode="date" 						   
					           startYear="2008" 
					           endYear="2100"
					           :value="'2020-04'"
					           :current="true"
					           fields="month"
					           @confirm="onConfirm"
					           :disabled-after="true"
					           ref="date" 
					       ></w-picker>
	</view>
</template> 

<script>
import uniLoadMore from "../components/uni-load-more/uni-load-more.vue"
	export default {
		components: {uniLoadMore},
		data() {
			return {
				    titlename:'',
					visible:false,
					list:['积分',/* '金币', */'余额','佣金','提现佣金'/* ,'提现金币' */],
					cardList:['卡片积分',/* '卡片金币', */'卡片余额','卡片佣金','卡片提现佣金'/* ,'卡片提现金币' */],
					listsubtitle:['获得积分',/* '获得金币', */'获得余额','获得福利金','提现福利金'/* ,'提现金币' */],
					wrap_height:null,
				    duration: 500,
					height:null,
					zhanwei_height:null,
					icons:'',
					tabWidth:null,
					card_height:0,
					tabIndex:0, //默认tab0
					tabMsg:{
						width:[],
						left:[],
					},
					zhuangtai:['more','loading','wu'],
					state:0,//0上拉刷新 1刷新中 2无更多
					contentList:[],
					dataList:[],
					dataListObj:{},
					listLength:null,
					cardContentList:{
						money:null,
						jin_money:null,
						income:null,
						spending:null,
						yue:null,
						score:null,
						nian:null
					},
					url:'',
					user:'', 
					type:[],
					user_key:'',
					yhpz:'',
					ye:[0,0,0,0,0,0],
					number:30,
					wrap_active:false,
					currentDate:{
						year:'',
						month:''
					},
					info:[],
					infocolor:[],
					cnds:'',
				        }
		}, 
		onLoad(options) {
			
			console.log(options);
			this.icons=uni.getStorageSync('icons');
			this.cnds = uni.getStorageSync('CND_key');
			uni.request({
				url: uni.getStorageSync('APP_key') + '/ad.php',
				method: 'POST',
				data: {
					name: '记账本背景',
			
				},
				header: {
					'content-type': 'application/x-www-form-urlencoded',
				},
				dataType: 'json',
				success: (res)=> {
					let arr = [];
					res.data.forEach((item,inds)=>{
						 if(options.type==null || options.type==undefined || options.type==''){
							 arr.push(item);
							this.infocolor.push(item.color);
						 }else{ 
							 var op=options.name=='福利金'?'佣金':options.name;
							 if(op==item.title){
								 arr.push(item);
							this.infocolor.push(item.color);
							 }
						 }
							
							
						
					});
					
					this.info = arr;
			
			
			
				}
			});
			
			uni.setNavigationBarTitle({
				title:options.name
			});
			this.currentDate.year = new Date().getFullYear();
			this.currentDate.month = new Date().getMonth()+1; 
			if(this.currentDate.month<10){
			 	this.currentDate.month='0' + this.currentDate.month;
			}
			 // console.log(this.currentDate)
			this.url = uni.getStorageSync('APP_key')+'/books_data.php';
			this.user=uni.getStorageSync('user');
			this.user_key=uni.getStorageSync('user_key'); 
			 this.yhpz=uni.getStorageSync('yhpz');
			 if(options.type==null || options.type==undefined || options.type==''){
			 	
				// 请求卡片
				 this.request('卡片'+this.list[this.tabIndex],this.cardContentList);
				 // 请求列表内容
				this.request(this.list[this.tabIndex],this.cardList);
				  // this.request('卡片金币',this.cardList) 
			 }else{
				 var op=options.name=='福利金'?'佣金':options.name;
				 this.list=[op];
				 this.cardList=['卡片'+op];
				 this.listsubtitle=['获得'+options.name];
				 
				
			 	// 请求卡片
			 	 this.request('卡片'+this.list[this.tabIndex],this.cardContentList);
			 	 // 请求列表内容
			 	this.request(this.list[this.tabIndex],this.cardList);
			 	  // this.request('卡片金币',this.cardList) 
			 }
			
			
		},
		onReady() {
			
			uni.getSystemInfo({
				success:(res)=>{
					this.height = res.windowHeight;
				}
			});
			
			uni.createSelectorQuery().selectAll('.scroll_item').boundingClientRect(data=>{
			data.forEach((ele)=>{
				this.tabMsg.width.push(ele.width);
				this.tabMsg.left.push(ele.left);
			})
			const query = uni.createSelectorQuery()
				query.select('#contaniner').boundingClientRect()
				query.select('.zhanwei').boundingClientRect()
				query.select('#demo0').boundingClientRect();
				query.select('.swiper-item').boundingClientRect(); 
				query.select('.scroll-view_H').boundingClientRect();
				
				query.exec(res=>{
					// this.height = res[0].height;
					this.zhanwei_height = res[1].height;
					// console.log(this.zhanwei_height)
					// if(this.type.length!=1){
					// 	this.tabWidth = res[2].width
					// 	// console.log(res)
					// 	this.scroll_view_H_height = res[4].height;
					// 	this.wrap_height = this.height-this.scroll_view_H_height;
					// }
					
				}); 
			}).exec();
			
				
			
		
		},
		onReachBottom() {
			this.lowerLoadMore();
		},
		
	  methods: {
		  // 切换wrap
		  changeWrapActive(i){

			  this.contentList[i].wrap_active = !this.contentList[i].wrap_active;

		  },
		  // 点击tab切换
		  clickTab(i){
			 this.tabIndex = i;
		  },
		  // 触底更新
		  lowerLoadMore(){
			  this.ye[this.tabIndex]+=1;
			  console.log(this.tabIndex);
			 this.request(this.list[this.tabIndex],this.contentList);
			  },
		  // 日期
		  onConfirm(e){
			 //console.log(e);
			  this.ye[this.tabIndex] = 0;
			  this.contentList =[];
			  this.currentDate.year = e.obj.year;
			  this.currentDate.month = e.obj.month;
			  if(this.type.length==1){
				    this.request(this.list[this.type[0]],this.contentList);
			  }else{
				    this.request(this.list[this.tabIndex],this.contentList);
			  }
				  
			 
			  },
		  openCalendar(){
			this.$refs.date.show()
			  },
			  // 日期完
			  
			    // 切换的时候触发
		  ontabChange:function(e){
			  this.tabIndex = e.detail.current;
			  // 清空contentList 清空listLength 并改变state 为1  
			  this.contentList =[];
			  this.listLength = 0;
			  
			  this.state = 1;
			   this.request(this.list[this.tabIndex],this.contentList);
			   // 请求卡片
			   this.request('卡片'+this.list[this.tabIndex],this.cardContentList);
			   // console.log(this.tabIndex)
		  },
		  // 导航条滚动时触发
			// scroll: function(e) {
			//     this.scrollLeft = e.detail.scrollLeft
			//         },
			request(type,dataa){
				var _self = this;
			// 列表走这里
					uni.request({
					url:this.url,
					method:'POST',
					header:{
						'content-type': 'application/x-www-form-urlencoded', 
					},
					data:{ 
						user:this.user,
						user_key:this.user_key,
						yhpz:this.yhpz,
						type:type,
						ye:this.ye[this.tabIndex],
						number:this.number,
						date:new String(this.currentDate.year) + new String(this.currentDate.month),
					},
					success:(res)=>{ 
						
						// let newArr = [];
						
						if( type.substring(0,2)!='卡片'){
						
							var data = [];
							// var count =0;
							for(var i = 0; i < res.data.length; i++) {
								//console.log('第一个for循环')
							    if(!data[ res.data[i].date]) {
							        var arr = [];
							        arr.push( res.data[i]);
							        data[ res.data[i].date] = arr;
							    }else {
							        data[ res.data[i].date].push( res.data[i])
							    }
							}
							//console.log(data)
							for( var key in data){
								//console.log('第二个for循环 对象')
								var obj = {
									date:key,
									dateArr:data[key],
									wrap_active:false,
									xiqi:'',
									shouru:0,
									zhichu:0,
								} 
								data[key].forEach((item,p)=>{
									if(item.type==1){
										obj.zhichu+=parseFloat(item.money);
									}else{
										obj.shouru+=parseFloat(item.money);
									}
								})
								var datadate=new Date(key.split('.').join('/'));
								var xiqi=datadate.getDay();
								obj.xiqi=(xiqi==0?'星期日':xiqi==1?'星期一':xiqi==2?'星期二':xiqi==3?'星期三':xiqi==4?'星期四':xiqi==5?'星期五':'星期六');
									// console.log(data[key]) //这里拿到的是数组
								this.contentList.push(obj);
							}
							// 这里在循环一次所请求的数据 要判断之前 是否存在该数组的日期 有的话就往contentList中某个序号添加 否则直接push
							var sth = '';
							var sthIndex;
							this.contentList.forEach((each,j)=>{ 
								//console.log('第三个for循环 数据')
								if(each.date==sth){
									var sthdateArr=[];
									sthIndex = j;
									this.contentList[j-1].dateArr.forEach((item,p)=>{
										
										
										this.contentList[j].dateArr.unshift(item);
									})
										// this.$set(this.contentList[j],'dateArr',sthdateArr);
									//console.log('序号是:'+j);
								}
								sth=each.date;
								// each.wrap_active = false;
							})
							if(sthIndex){
								this.$set(this.contentList[sthIndex-1],'dateArr',[null]);
								this.contentList[sthIndex-1].dateArr = this.contentList[sthIndex-1].dateArr.filter(function(e){return e}); 
							}
							//console.log('第四个for循环 准备得出数据')
							//console.log(this.contentList); 
							if(res.data.length<this.number){
								//无更多内容
								this.state = 2
							} //否则下拉刷新
							else{this.state = 0}
							// listLength拿来算高度   
							this.listLength += res.data.length 
							// console.log(this.listLength)
						}
						// 卡片走这里
						else{
							// console.log(res)
							 for(var key in res.data){
								 dataa[key] = res.data[key]
							 }
							// console.log(this.cardContentList) 
						}
					},
					fail:(err)=>{
						// console.log(err)
					}
				})
			},
	    },

 }
</script>

<style lang="scss">
	.zhanwei{
		height: 120upx;
		position: absolute;
	}
	#contaniner{
		// position: fixed;
		width: 100%; 
		height: 100%;
	}
.scroll-view_H{
	width: 100%;
	display: flex;
	height: 70upx; 
	// position: fixed;
	flex-wrap:nowrap;
	flex-direction: row;
	white-space: nowrap;
	background-color: $bgcolor-white-0;
	.scroll_item{
		padding:0rpx 50rpx;
		height: 65upx;
		line-height: 65upx;
		display: inline-block;
		flex-wrap: nowrap;
		text-align: center;
		font-size: $color-size-2;
	}
	.active{
		color: $color-blue-0;
	}
}
// 导航线
	.line{
		position: absolute;
		height: 6upx;
		width: 50upx;
		background-color: $color-blue-1;
		transition: left 0.7s;
	}
	// 卡片区域内容
#swiper_wrap{
	height: 100vh;
}
#swiper_wrap .swiper-item{
	height: 400upx;
	margin: 20upx;
	border-radius: 30upx;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	position: relative;
	.images{
		width: 100%;
		height: 400upx;
		position: absolute;
		top:0rpx;
		left:0rpx;
		z-index: -1;
	}
	.dangqian{
		height: 80upx;
		line-height: 80upx;
		padding-left: 30upx;
		font-size: $color-size-3;
	}
	.amount{
		padding: 0rpx 30upx;
		height: 80rpx;
		line-height: 60rpx;
		.amont_money{
			display: inline-block;
			font-size: $color-size-6;
			font-weight: 800;
		}
		.amont_money_right{
			position: relative;
			display: inline-block;
			background-color: $color-red-0;
			color: $color-white-0;
			font-size: $color-size-0;
			padding: 5upx 14upx;
			line-height: 28rpx;
			bottom: 31upx;
			left: 10upx;
			border-radius: 13upx 10upx 10upx 0;
		}
	}
	// 日期
	.date_wrap{
		display: flex;
		flex-direction: column;
		height: 130upx;
		// margin: 30rpx 4rpx;
		// border: 1px solid #333;

		.date_wrap_top{
			height: 50upx;
			// 背景色系统调 到时候不是改这里的背景 是该 他的子元素背景
			background-color: rgba($color: $bgcolor-black-0, $alpha: 0.3);
			display: flex;
			align-items: center;
			text-align: center;
			margin: 0 10rpx;
			box-sizing: border-box;
			font-size: $color-size-2;
			.date_item_top{
				width: 33.3%;
			}
		}
		.date_wrap_bottom{ 
			flex: 1;
			display: flex;
			align-items: center;
			text-align: center;
			border-left: 1px solid rgba($color: $bgcolor-black-0, $alpha: 0.3);
			border-right: 1px solid rgba($color: $bgcolor-black-0, $alpha: 0.3);
			border-bottom: 1px solid rgba($color: $bgcolor-black-0, $alpha: 0.3);
			margin:0 10upx;
			box-sizing: border-box;
			font-size: $color-black-2;
			font-weight: 600;
			.date_item_bottom{
				width: 33.3%;
				display: inline-block;
				position: relative;
				font-size: $color-size-3;
				.san{
					width: 30rpx;
					height: 30rpx;
					font-size: $color-sizeicon-0;
					font-family: iconfont;
					position: absolute;
					right: 50rpx;
					top:-2rpx
					
				}
			}
		} 
	}
	.bottom_bar{
		position: absolute;
		bottom: 0upx;
		height: 60upx;
		line-height: 60upx;
		width: calc(100% - 40rpx);
		display: flex;
		background-color: rgba($color: $bgcolor-black-0, $alpha: 0.3);
		justify-content: space-between;
		font-size: $color-size-1;
		padding:0rpx 20rpx;
		
	}
}
.content_allwrap{
	padding: 0upx 20upx 0 20upx;
	background-color: $bgcolor-white-0;
}
.content_date2{
		border-bottom: 1px solid $bkcolor-black-9 !important;
}
	.content_date{
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: $color-size-3;
		font-weight: 600;
		padding: 10upx 0upx;
		border-top: 1px solid $bkcolor-black-9;
		.content_date_left{
			font-size: $color-size-0;
		}
		.conent_date_right{
		
			width: 60upx;
			height: 60upx;
			line-height: 60upx;
			font-size: $color-size-2;
			text-align: center;
			font-family: iconfont;
			transform-origin:30upx 30upx;
			transform: rotate(90deg);
			-ms-transform-origin:30upx 30upx;
			-ms-transform: rotate(90deg);
			-moz-transform-origin:30upx 30upx;
			-moz-transform: rotate(90deg);
			-webkit-transform-origin:30upx 30upx;
			-webkit-transform: rotate(90deg);
			-o-transform-origin:30upx 30upx;
			-o-transform: rotate(90deg);
			
			transition: all 1s ;
			display:block;
			color:$color-black-4;
		}
		.conent_date_active{
			width: 60upx;
			height: 60upx;
			line-height: 60upx;
			font-size: $color-size-2;
			text-align: center;
			font-family: iconfont;
			transform-origin:30upx 30upx;
			transform: rotate(180deg);
			-ms-transform-origin:30upx 30upx;
			-ms-transform: rotate(180deg);
			-moz-transform-origin:30upx 30upx;
			-moz-transform: rotate(180deg);
			-webkit-transform-origin:30upx 30upx;
			-webkit-transform: rotate(180deg);
			-o-transform-origin:30upx 30upx;
			-o-transform: rotate(180deg);
			transition: all 1s ;
			display:block;
			color:$color-black-4;
		}
}
		.item_wrap{
			transition: all 0.5s;
			overflow: hidden;
			box-sizing: border-box;
			height: 120upx;
			.load_more{
				height: 150upx;
				width: 100%;
				line-height: 150upx;
				text-align: center;
				}
			// height: 500upx;
			.item{
				// padding: 5upx 0upx;
				// line-height: 100upx;
				display: flex;
				align-items: flex-start;
				flex-wrap: wrap;
				.item_date{
					height: 60upx;
					line-height: 60upx;
					font-size: $color-size-2;
					color:$color-black-4;
					width: 100%;
				}
				.item_content{
					flex: 1;
					display: flex;
					justify-content: space-between;
					align-items: center;
					width: 100%;
					height: 60upx;
					line-height: 60upx;
					.item_content_left{
						width: 50%;
						box-sizing: border-box;
						flex: 1;
						display: flex;
						height: 60upx;
						line-height: 60upx;
						align-items: flex-start;
						.item_one_name{
						background-color: $bgcolor-green-0;
						margin-right: 25upx;
						width: 60upx;
						height: 60upx;
						text-align: center;
						line-height: 60upx;				
						border-radius: 60upx;
						overflow: hidden;
						color: $color-white-0;
						font-size: $color-size-1;
						}
						.item_remark{
							font-size: $color-size-2;
							color: $color-black-4;
							width: calc(100% - (25upx + 60upx));
						}
					}
					.item_content_right{
						width: 50%;
						height: 70upx;
						line-height: 70upx;
						font-size: $color-size-8;
						color: $color-black-4;
						text-align: right;
					}
				}
			}

		}
		.item_wrap_active{
			height: 0upx !important;
		}
</style>
